<template>
  <div class="flow_assessment">
    <ListTitle list-title="空域态势容流评估"></ListTitle>
    <!-- 时间查询 -->
    <div class="group_8_flow">
      <span class="text_time_flow">时间信息</span>
      <div class="time_block">
        <el-date-picker v-model="selectTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-ddTHH:mm:ss"
          popper-class="selectDown" @change="handleTimeChange" @blur="handleTimeBlur" :format="showTime"
          @focus="handleTimeVisibleChange" background="transparent" :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <el-button type="primary" @click="fetchTableData">查询</el-button>
    </div>

    <!-- gis -->
    <div class="cesiumContainerBox">
      <div class="layer"></div>
      <div id="cesiumContainer" style="height: 100%;width: 100%;"></div>
    </div>

    <!-- 态势评估模块 -->
    <div class="container_flow">
      <!-- 标题 -->
      <div class="group_20_flow">
        <div class="group_21_flow">
          <img class="image_3_flow"
            src="../assets/img/SketchPnge98c6bf1fe552f69e9323b59eaf92d6bef1bbd085f1b8cecefc968590eb3010d.png" />
          <img class="thumbnail_55_flow"
            src="../assets/img/SketchPng50cff3f326e6df8183103e928ce1a68e6f8c4c6371bf014928ec4209ce963753.png" />
        </div>
        <span class="text_21_flow">态势评估情况</span>
      </div>
      <!-- 选择查询 -->
      <div class="group_22_flow">
        <el-select v-model="queryData.airspaceType" class="select-box_flow block_17_flow" popper-class="dxfSelect"
          placeholder="请选择" @change="fetchTableData">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select v-model="queryData.alertLevel" class="select-box_flow block_18_flow" popper-class="dxfSelect"
          placeholder="请选择" @change="fetchTableData">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <!-- 列表  -->
      <div class="regional_table_flow">
        <el-table :data="tableData" height="661" style="width: 95%" ref="table" :row-key="(row) => row.id"
          @expand-change="onExpandChange" :expand-row-keys="expands">
          <el-table-column type="expand">
            <template v-slot:default="props">
              <div class="section_14_flow" ref="expandPanel">
                <div class="buttons-container_flow">
                  <div class="text-wrapper_10_flow" :class="{ activeBtn: currentPeriodActive }">
                    <button class="current-period-btn" @click="togglePeriod('current', props.row)">
                      当前时段运行数据
                    </button>
                  </div>
                  <div class="text-wrapper_11_flow" :class="{ activeBtn: !currentPeriodActive }">
                    <button class="full-day-btn" @click="togglePeriod('fullDay', props.row)">
                      全天整体运行数据
                    </button>
                  </div>
                </div>
                <div v-if="currentPeriodActive">
                  <div class="group0_39_flow">
                    <span class="text_33_flow">空域对象类型</span>
                    <span class="text_34_flow">{{
                      props.row.airspaceSize + "型" || "-"
                    }}</span>
                    <span class="text_33_flow">空域流量</span>
                    <span class="text_34_flow">{{ props.row.airspaceFlow || "-" }} 架次/小时</span>
                    <span class="text_35_flow">空域容量</span>
                    <span class="text_36_flow">{{ props.row.airspaceCapacity || "-" }} 架次/小时</span>
                    <span class="text_39_flow">空域网格信息</span>
                    <div class="text_40_flow">
                      <div v-for="(line, index) in formattedAirspaceGrid(
                        props.row
                      )" :key="index">
                        {{ line }}
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else class="full-day-data_flow">
                  <div style="
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                      margin-bottom: 3px;
                    ">
                    <div class="image-text">
                      <div class="block_20_flow">
                        <img class="image_6" referrerpolicy="no-referrer" src="../assets/img/module3/icon.png" />
                        <span class="text-group_1">空域容流曲线</span>
                      </div>
                    </div>
                    <!-- <p style="margin-left: 10px; margin-top: 5px">空域容流曲线</p> -->
                    <button @click="handleView" class="btn_full" :class="{ activeBtn: dialogVisible }">
                      全天曲线
                    </button>
                  </div>

                  <div class="charts_flow">
                    <div ref="chartContainer" style="height: 220px"></div>
                  </div>

                  <div class="image-text">
                    <div class="block_20_flow" style="margin-top: 15px !important">
                      <img class="image_6" referrerpolicy="no-referrer" src="../assets/img/module3/icon.png" />
                      <span class="text-group_1">告警时段信息</span>
                    </div>
                  </div>

                  <div class="block_22_flow">
                    <!-- <p style="margin-left: 10px">{{ detailData.alarmTime }}</p> -->
                    <ul class="custom-bullet">
                      <li v-for="(time, index) in formattedAlarmTimes" :key="index" class="box_59_flow"
                        :data-level="detailData.alarmTime[index].level">
                        {{ time }}
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <!-- 其他的列定义 -->
          <!-- <el-table-column label="序号" prop="id"> </el-table-column> -->
          <!-- 显示虚拟的ID -->
          <el-table-column label="序号" width="50px">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="空域对象名称" prop="airspaceNumber">
          </el-table-column>
          <el-table-column label="等级" prop="alertLevel" width="70px">
            <template slot-scope="scope">
              <!-- <div class="risk-level_flow"> -->
              <img :src="getRiskIcon(scope.row.alertLevel)" alt="Risk Icon" class="risk-icon" />
              <!-- </div> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="box_57" v-if="dialogVisible">
      <div class="dialog_top">
        <div class="group_57">
          <div class="group_58"></div>
          <div class="group_59" @click="closeModule"></div>
        </div>
        <span class="text_57">全天空域容流曲线</span>
      </div>
      <!-- 曲线 -->
      <div class="module-content">
        <div class="charts_flow">
          <div ref="fullChartContainer" style="height: 300px"></div>
        </div>
      </div>
      <img class="label_4" referrerpolicy="no-referrer" src="../assets/img/module3/dialogIcon.png" />
    </div>
  </div>
</template>

<script>
import ListTitle from "@/components/ListTitle";
import * as echarts from "echarts";
import axios from "axios";
import {
  drawCylinderAreaM1,
  draw3DRectangularPipelineTrackM1_2,
  draw3DPolygonalPrismM1,
} from "@/utils/draw3D-module2.js";
import { addDroneModel } from "@/utils/draw3D-module3.js";


const baseApi = process.env.NODE_ENV === 'production'
  //? process.env.VUE_APP_REMOTE_API
  ? '/api'  // 使用代理路径
  : process.env.VUE_APP_REMOTE_API_MODULE4;

const baseWebsocketApi = process.env.VUE_APP_WEBSOCKET
// console.log("basewebsocketapi", baseWebsocketApi)

export default {
  name: "Module5FlowAssessment",
  components: {
    ListTitle,
  },
  data() {
    return {
      entitiesMap: {}, // 存储实体的映射关系
      droneModels: [],
      wsClosing: false,
      //  positions:[],// 用于存储所有无人机球体的位置
      ws: null,
      selectTime: "", //v-model绑定的时间参数
      showTime: "",
      startTimeNow: "",
      endTimeNow: "",
      calMinTime: 0, //判断所选时间的时间段
      calSecTime: 0,
      formattedAlarmTimes: "",
      dialogVisible: false, // 控制弹窗显示状态
      viewer: null,
      currentPeriodActive: true,
      expands: [], //点击行
      queryData: {
        endTime: "",
        startTime: "",
        airspaceType: "",
        alertLevel: "",
      },
      tableData: [], //接收查询后的表格数据
      detailData: [], //接收全体整体运行数据
      selectedValue1: 0,
      selectedValue2: 0,
      pickerOptions: {
        disabledDate(time) {
          // 禁止选择今天的日期及以后的日期
          return time.getTime() > Date.now();
        },
      },
      options1: [
        { value: "", label: "空域对象" },
        { value: 1, label: "起降区" },
        { value: 2, label: "航路" },
        { value: 3, label: "作业区" },
      ],
      options2: [
        { value: "", label: "告警等级" },
        { value: 5, label: "五级风险" },
        { value: 4, label: "四级风险" },
        { value: 3, label: "三级风险" },
        { value: 2, label: "二级风险" },
        { value: 1, label: "一级风险" },
      ],
    };
  },
  created() {
    this.selectTime = this.getCurrentDateTime();
    this.handleTimeChange(this.selectTime);
  },
  async mounted() {
    await this.initializeCesium();
    this.fetchTableData();
    // 确保 DOM 加载完成后再执行滚动逻辑
    this.$nextTick(() => {
      if (this.expands.length > 0) {
        this.scrollToVisibleRow(
          this.tableData.find((row) => row.id === this.expands[0])
        );
      }
    });
  },
  methods: {
    formattedAirspaceGrid(row) {
      if (!row.airspaceGrid) return "-";

      // 按逗号分割字符串
      const items = row.airspaceGrid.split(",").map((item, index, array) => {
        // 如果是最后一个项，则不加逗号和空格
        return index === array.length - 1 ? item.trim() : item.trim() + ", ";
      });

      // 每三个项组成一行
      const lines = [];
      for (let i = 0; i < items.length; i += 3) {
        lines.push(items.slice(i, i + 3).join(""));
      }

      return lines;
    },
    //处理获取的实时时间 格式为：2024-09-19T14:18:35
    getCurrentDateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hour = String(now.getHours()).padStart(2, "0");
      const minute = String(now.getMinutes()).padStart(2, "0");
      const second = String(now.getSeconds()).padStart(2, "0");

      // 返回格式化的时间字符串
      return `${year}-${month}-${day}T${hour}:${minute}:${second}`;
    },
    handleTimeChange(time) {
      this.calMinTime = parseInt(time.slice(14, 16), 10);
      this.showTime = time.slice(0, 10).replace(/-/g, "/"); // 将 yyyy-MM-dd 转换为 yyyy/MM/dd
      if (this.calMinTime >= 0 && this.calMinTime < 15) {
        this.showTime =
          this.showTime +
          "   " +
          time.slice(11, 13) +
          ":00:00 — " +
          time.slice(11, 13) +
          ":15:00";
        this.queryData.startTime = time.slice(0, 13) + ":00:00";
        this.queryData.endTime = time.slice(0, 13) + ":14:59";
      } else if (this.calMinTime >= 15 && this.calMinTime < 30) {
        this.showTime =
          this.showTime +
          "   " +
          time.slice(11, 13) +
          ":15:00 — " +
          time.slice(11, 13) +
          ":30:00"; //用于后端的查询信息
        this.queryData.startTime = time.slice(0, 13) + ":15:00";
        this.queryData.endTime = time.slice(0, 13) + ":29:59";
      } else if (this.calMinTime >= 30 && this.calMinTime < 45) {
        this.showTime =
          this.showTime +
          "   " +
          time.slice(11, 13) +
          ":30:00 — " +
          time.slice(11, 13) +
          ":45:00";
        this.queryData.startTime = time.slice(0, 13) + ":30:00";
        this.queryData.endTime = time.slice(0, 13) + ":44:59";
      } else if (this.calMinTime >= 45 && this.calMinTime < 60) {
        const calHour = parseInt(time.slice(11, 13)) + 1;
        const nextHourStr = calHour < 10 ? `0${calHour}` : `${calHour}`;
        this.showTime =
          this.showTime +
          "   " +
          time.slice(11, 13) +
          ":45:00 — " +
          nextHourStr +
          ":00:00";
        this.queryData.startTime = time.slice(0, 13) + ":45:00";
        this.queryData.endTime = time.slice(0, 13) + ":59:59";
      }
    },
    handleTimeVisibleChange(change) {
      // console.log("handleTimeVisibleChange");
      this.showTime = "yyyy/MM/dd HH:mm:ss";
    },
    handleTimeBlur() {
      //console.log("handleTimeBlur");
      this.handleTimeChange(this.selectTime);
    },

    handleView() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.fullChart();
      });
    },
    closeModule() {
      this.dialogVisible = false;
    },

    async initializeCesium() {
      this.viewer = new Xmap.Viewer("cesiumContainer").viewer;
      console.log("viewer", this.viewer);
      Xmap.Operates.Fly.camaraFlyToPosition(
        { lng: 120, lat: 20, height: 10000 },
        null,
        0
      );
      // const amapimg = Xmap.AirspaceManage.HierarchicalGrid.createImageryProvider('xyz', { url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}' })

      Xmap.AirspaceManage.HierarchicalGrid.createImageryProvider('xyz',
        {
          url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
        })
        this.viewer.scene.screenSpaceCameraController.zoomEventTypes = [
          Cesium.CameraEventType.WHEEL
        ];
        // console.log("Cesium.CameraEventType",Cesium.CameraEventType )
        this.viewer.scene.screenSpaceCameraController.tiltEventTypes = [
          Cesium.CameraEventType.MIDDLE_DRAG // 鼠标中键按下事件
        ];
      this.viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(113.5405629, 22.1247559, 17000),
      });
      // Xmap.Layers.BaseLayer.addBaseLayer([{ layer: amapimg, index: 0 }]);
      // Xmap.AirspaceManage.HierarchicalGrid.ShowGridsLevel(2,true);
      //Xmap.AirspaceManage.HierarchicalGrid.ShowGridsWithLevelDynamic();

      // 经纬度点列表
      // const points = [
      //   { longitude: 113.55895, latitude: 22.113694 },
      //   { longitude: 113.559382, latitude: 22.14704 },
      //   { longitude: 113.505771, latitude: 22.147709},
      //   { longitude: 113.505196, latitude: 22.113828 }
      // ];

      // // 计算范围
      // const minLongitude = Math.min(...points.map(point => point.longitude));
      // const maxLongitude = Math.max(...points.map(point => point.longitude));
      // const minLatitude = Math.min(...points.map(point => point.latitude));
      // const maxLatitude = Math.max(...points.map(point => point.latitude));

      // // 层级级别和高度
      // const level = 8;
      // const height = 10;

      // // 生成网格
      // const step = 0.0002; // 步长可以根据需要调整
      // for (let longitude = minLongitude; longitude <= maxLongitude; longitude += step) {
      //   for (let latitude = minLatitude; latitude <= maxLatitude; latitude += step) {
      //     const griddingNumber = Xmap.AirspaceManage.HierarchicalGrid.EveryLevelCoding(level, longitude, latitude, height);
      //     // console.log(`Longitude: ${longitude}, Latitude: ${latitude}, Height: ${height}, Gridding Number: ${griddingNumber}`);
      //    console.log(`EveryLevelCoding: (8,${longitude},${latitude},${height}), Gridding Number: ${griddingNumber}`);
      //   }
      // }

      //  const griddingNumber = Xmap.AirspaceManage.HierarchicalGrid.EveryLevelCoding(8,113.457887,22.143248, 2);
      //  console.log(griddingNumber);

      //  const llh = Xmap.AirspaceManage.HierarchicalGrid.CodingToBLH('VKJA101');
      //  console.log(llh);

      // Xmap.AirspaceManage.HierarchicalGrid.WireframeForLevelGrids(2,true);

      // console.log(Xmap.AirspaceManage.HierarchicalGrid.SetStyleForSingleGrid('VKJA101',{r:100/255,g:100/255,b:100/255,a:0.6},true));
      //  console.log(Xmap.AirspaceManage.HierarchicalGrid.createImageryProvider('tiles/x.png',{url:'geoserve/wms',layers:'geo'}));
      //  console.log(Xmap.AirspaceManage.HierarchicalGrid.load3dtiles('https://data.cesium.com/3dtiles/v1/SanFrancisco/tileset.json'));
      // console.log(Xmap.AirspaceManage.HierarchicalGrid.loadDEM('https://api.maptiler.com/maps/elevation/512/{z}/{x}/{y}.png?key=YOUR_API_KEY'));

      //  Xmap.AirspaceManage.HierarchicalGrid.CodeVisibleForLevelGrids(2,false);
      // Xmap.AirspaceManage.HierarchicalGrid.loadCityGrids({
      // B:34.45,
      // L:112.3,
      // height:234
      // },2);

      // Xmap.AirspaceManage.HierarchicalGrid.AddGeographic('Cylinder',{r:100/255,g:100/255,b:100/255,a:0.6});

      // console.log(Xmap.AirspaceManage.HierarchicalGrid.ProjectionGrid(2));

      //  Xmap.ScreenCoordToGraphy();
    },

    // 绘制圆形区域
    updateCircleAreas() {
      this.tableData.forEach((item) => {
        if (item.circlePoints && item.circlePoints.length > 0) {
          item.circlePoints.forEach((circlePoint) => {
            // console.log("circlePoint", circlePoint);
            const lon = circlePoint.longitude;
            const lat = circlePoint.latitude;
            const minHeight = circlePoint.minAltitude;
            const maxHeight = circlePoint.maxAltitude;
            const radius = circlePoint.radius;

            // 调用绘制方法
            const entity = drawCylinderAreaM1(
              this.viewer,
              lon,
              lat,
              minHeight,
              maxHeight,
              radius,
              "GREEN",
              0.2,
              item.airspaceNumber
            );
            this.entitiesMap[item.id] = entity;
          });
        }
      });

      this.viewer.zoomTo(this.viewer.entities);
    },
    // 绘制航路折线
    updateRoutes() {
      this.tableData.forEach((item) => {
        // console.log("item", item)
        if (item.wayPoints && item.wayPoints.length > 0) {
          const positions = [];
          const pointNames = [];
          const sizes = [];

          // 提取经纬度和高度，并生成每段的宽高
          item.wayPoints.forEach((point, index) => {
            positions.push(point.longitude, point.latitude, point.altitude);
            pointNames.push(`${item.airspaceObjectName} - 点${index + 1}`);

            if (index < item.wayPoints.length - 1) {
              sizes.push([100, 200]); // 宽度，高度
            }
          });
          const entities = draw3DRectangularPipelineTrackM1_2(
            this.viewer,
            positions,
            sizes,
            0.2,
            "YELLOW",
            item.airspaceNumber
          );
          this.entitiesMap[item.id] = entities;
        }
      });
      // 缩放视图到新添加的航路
      this.viewer.zoomTo(this.viewer.entities);
    },
    updatePolygonAreas() {
      // 清除之前的实体
      // this.viewer.entities.removeAll();

      // 遍历表格数据，找到多边形区域数据
      this.tableData.forEach((item) => {
        // console.log("item", item)
        if (item.polygonPoints && item.polygonPoints.length > 0) {
          const positions = [];
          const pointNames = [];
          let minHeight = Number.POSITIVE_INFINITY;
          let maxHeight = Number.NEGATIVE_INFINITY;

          // 提取经纬度和高度
          item.polygonPoints.forEach((point, index) => {
            positions.push(point.longitude, point.latitude);
            pointNames.push(`${item.airspaceNumber} - 点${index + 1}`);

            // 计算最小和最大高度
            if (point.minAltitude < minHeight) {
              minHeight = point.minAltitude;
            }
            if (point.maxAltitude > maxHeight) {
              maxHeight = point.maxAltitude;
            }
          });

          // 使用自定义方法绘制多边形柱状体
          const entity = draw3DPolygonalPrismM1(
            this.viewer,
            positions,
            minHeight,
            maxHeight,
            "BLUE",
            0.2,
            item.airspaceNumber
          );
          this.entitiesMap[item.id] = entity;
        }
      });

      // 缩放视图到新添加的区域
      this.viewer.zoomTo(this.viewer.entities);
    },
    getRiskIcon(riskLevel) {
      // 返回对应风险等级的图片路径
      switch (riskLevel) {
        case 1:
          return require("../assets/img/module3/risk-1.png");
        case 2:
          return require("../assets/img/module3/risk-2.png");
        case 3:
          return require("../assets/img/module3/risk-3.png");
        case 4:
          return require("../assets/img/module3/risk-4.png");
        case 5:
          return require("../assets/img/module3/risk-5.png");
      }
    },
    togglePeriod(periodType, row) {
      this.currentPeriodActive = periodType === "current";
      if (!this.currentPeriodActive) {
        this.fetchDetailData(row);
        // this.initChart(); // 切换到全天整体运行数据时重新初始化图表
      } else {
        // this.tableData = row;
        // 清除图表实例
        this.clearChart();
      }
    },
    clearChart() {
      // 清空图表容器
      // echarts.dispose(this.$refs.chartContainer);
      if (this.$refs.chartContainer) {
        const chartInstance = echarts.getInstanceByDom(
          this.$refs.chartContainer
        );
        if (chartInstance) {
          chartInstance.dispose();
        }
      }
    },
    onExpandChange(row, expandedRows) {
      this.dialogVisible = false;
      // 清除之前的高亮
      this.clearHighlights();
      if (expandedRows.length > 0) {
        this.expands = [row.id];
        // 高亮对应的三维图形
        this.highlightCesiumEntities(row.id);
        if (!this.currentPeriodActive) {
          this.fetchDetailData(row);
          if (this.dialogVisible) {
            this.handleView();
          }
        }
        this.scrollToVisibleRow(row);
      } else {
        this.expands = [];
      }
    },
    highlightCesiumEntities(id) {
      const entity = this.entitiesMap[id];
      // console.log("highlight", id, entity);
      // console.log("length", entity.length);

      if (entity.length > 1) {
        entity.forEach((entity) => {
          if (entity.corridor) {
            entity.corridor.material = Cesium.Color.YELLOW; // 修改高亮颜色

          }
        });
      } else if (entity) {
        if (entity.cylinder) {
          // 确保存在该属性
          entity.cylinder.material = Cesium.Color.GREEN; // 修改高亮颜色
        }
        if (entity.corridor) {
          entity.corridor.material = Cesium.Color.YELLOW;
        }
        if (entity.polygon) {
          entity.polygon.material = Cesium.Color.BLUE;
        }
      }
      this.viewer.flyTo(entity, {
        duration: 2,
        offset: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-30),  // 视角抬高一些
          roll: 0
        }
      });
    },

    clearHighlights() {
      Object.values(this.entitiesMap).forEach((entity) => {

        if (entity.length > 1) {
          entity.forEach((entity) => {
            if (entity.corridor) {
              entity.corridor.material = Cesium.Color.YELLOW.withAlpha(0.2); // 修改高亮颜色
            }
          });
        } else if (entity) {
          if (entity.cylinder) {
            entity.cylinder.material = Cesium.Color['GREEN'].withAlpha(0.2); // 修改高亮颜色
          }
          if (entity.corridor) {
            entity.corridor.material = Cesium.Color['YELLOW'].withAlpha(0.2);
          }
          if (entity.polygon) {
            entity.polygon.material = Cesium.Color['BLUE'].withAlpha(0.2);
          }
        }
      });
    },
    scrollToVisibleRow(row) {
      if (row) {
        const table = this.$refs.table;
        const bodyWrapper = table.$el.querySelector(".el-table__body-wrapper");

        // 确保 DOM 更新后再查询元素
        this.$nextTick(() => {
          const rowElement = bodyWrapper.querySelector(
            `tr.el-table__row.expanded`
          );
          const expandPanel = this.$refs.expandPanel;

          if (rowElement && expandPanel) {
            // 获取展开行相对于 bodyWrapper 的位置
            const rowRect = rowElement.getBoundingClientRect();
            // 获取展开面板相对于 bodyWrapper 的位置
            const rect = expandPanel.getBoundingClientRect();

            // 获取 bodyWrapper 的位置
            const bodyWrapperRect = bodyWrapper.getBoundingClientRect();

            // 当前滚动位置
            const scrollTop = bodyWrapper.scrollTop;

            // 检查展开行是否完全可见
            const isRowFullyVisible =
              rowRect.top >= bodyWrapperRect.top &&
              rowRect.bottom <= bodyWrapperRect.bottom;

            // 检查展开面板是否完全可见
            const isPanelFullyVisible =
              rect.top >= bodyWrapperRect.top &&
              rect.bottom <= bodyWrapperRect.bottom;

            // 如果展开行或展开面板没有完全可见，则滚动表格
            if (!isRowFullyVisible || !isPanelFullyVisible) {
              // 计算目标滚动位置，将展开行滚动到表格顶部
              const targetScrollTop =
                scrollTop + rowRect.top - bodyWrapperRect.top;

              // 应用新的滚动距离
              bodyWrapper.scrollTop = targetScrollTop;

              // 设置展开的行
              this.expands = [row.id];
            }
          } else {
            console.error("Row or expand panel not found.");
          }
        });
      }
    },
    generateRandomDroneData(num) {
      const droneData = [];
      const longitudes = [113.544, 113.548, 113.552];
      const latitudes = [22.1354, 22.1365, 22.1369];

      for (let i = 0; i < num; i++) {
        // 随机选择经纬度并添加随机偏移
        const longitude = longitudes[Math.floor(Math.random() * longitudes.length)] + (Math.random() * 0.0005 - 0.00025); // ±0.00025的偏移
        const latitude = latitudes[Math.floor(Math.random() * latitudes.length)] + (Math.random() * 0.0005 - 0.00025); // ±0.00025的偏移

        droneData.push({
          longitude: parseFloat(longitude.toFixed(6)), // 保留6位小数
          latitude: parseFloat(latitude.toFixed(6)),   // 保留6位小数
          altitude: 100,
        });
      }

      return droneData;
    },
    drawDrone() {
      if (this.ws) {
        console.log("Closing previous WebSocket connection");
        this.ws.onmessage = null;
        this.ws.onclose = null;
        this.ws.close();
        this.ws = null;
      }

      this.ws = new WebSocket(`ws://${baseWebsocketApi}/ws/message`);

      this.ws.onopen = () => {
        console.log("ws onopen");
        this.wsClosing = false;
        //   模拟的无人机数据
        //   const droneData1 = [
        //   { longitude: 113.544, latitude: 22.1369, altitude: 100 },
        //   { longitude: 113.548, latitude: 22.1369, altitude: 100 },
        //   { longitude: 113.552, latitude: 22.1365, altitude: 100 },
        //   { longitude: 113.552, latitude: 22.1358, altitude: 100 },
        //   { longitude: 113.552, latitude: 22.1354, altitude: 100 },
        //   { longitude: 113.551, latitude: 22.1354, altitude: 100 },
        //   { longitude: 113.551, latitude: 22.1358, altitude: 100 },
        //   { longitude: 113.544, latitude: 22.1358, altitude: 100 },
        // ];

        // // 生成200个无人机数据
        // const droneData200 = this.generateRandomDroneData(50);
        // console.log(droneData200);

        // // 将数据转化为 JSON 字符串，模拟 WebSocket 接收到的数据
        // const message = JSON.stringify(droneData200);
        // console.log("假的无人机的数据", message);

        // const droneData = JSON.parse(message);

        // // 计算需要复制的数量
        // const totalModels = 200;
        // const numberOfData = droneData.length;
        // const modelsToCopy = Math.ceil(totalModels / numberOfData);

        // 如果模型数组为空，创建模型
        // if (this.droneModels.length === 0) {
        //   droneData.forEach((item) => {
        //     const cartographic = new Cesium.Cartographic(
        //       Cesium.Math.toRadians(item.longitude),
        //       Cesium.Math.toRadians(item.latitude),
        //       item.altitude
        //     );
        //     const position =
        //       Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);
        //     console.log("所有的无人机的position", position);

        //     // 创建并添加无人机模型
        //     const droneModel = addDroneModel(
        //       this.viewer,
        //       position,
        //       "/drone.glb"
        //     );
        //     // // 创建并添加无人机模型
        //     // for (let i = 0; i < modelsToCopy; i++) {
        //     //   // 计算每个模型的位置（可以根据需要修改位置逻辑）
        //     //   const offset = i * 0.0001; // 轻微偏移以避免重叠
        //     //   const newPosition = new Cesium.Cartesian3(
        //     //     position.x + offset,
        //     //     position.y + offset,
        //     //     position.z
        //     //   );

        //     //   const droneModel = addDroneModel(this.viewer, newPosition, "/drone.glb");
        //     //   this.droneModels.push(droneModel);
        //     // }
        //     this.droneModels.push(droneModel);
        //   });
        // } else {
        //   // 更新已存在模型的位置
        //   droneData.forEach((item, index) => {
        //     const cartographic = new Cesium.Cartographic(
        //       Cesium.Math.toRadians(item.longitude),
        //       Cesium.Math.toRadians(item.latitude),
        //       item.altitude
        //     );
        //     const position =
        //       Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);

        //     // 更新模型位置
        //     this.droneModels[index].position = position;
        //   });
        // }
      };

      this.ws.onmessage = (e) => {
        if (this.wsClosing) {
          console.log("WebSocket is closing, ignoring message.");
          return;
        }
        console.log("ws onmessage");

        const droneData = JSON.parse(e.data);

        // 如果模型数组为空，创建模型
        if (this.droneModels.length === 0) {
          droneData.forEach((item) => {
            const cartographic = new Cesium.Cartographic(
              Cesium.Math.toRadians(item.longitude),
              Cesium.Math.toRadians(item.latitude),
              item.altitude
            );
            const position =
              Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);

            // 创建并添加无人机模型
            const droneModel = addDroneModel(
              this.viewer,
              position,
              "/drone.glb"
            );
            this.droneModels.push(droneModel);
          });
        } else {
          // 更新已存在模型的位置
          droneData.forEach((item, index) => {
            const cartographic = new Cesium.Cartographic(
              Cesium.Math.toRadians(item.longitude),
              Cesium.Math.toRadians(item.latitude),
              item.altitude
            );
            const position =
              Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);

            // 更新模型位置
            this.droneModels[index].position = position;
          });
        }
      };

      this.ws.onclose = () => {
        console.log("WebSocket connection closed");
        this.wsClosing = false;
        this.ws = null;
      };
    },

    getCurrentTimeRange() {
      const time = this.getCurrentDateTime();
      const calMinTime = parseInt(time.slice(14, 16), 10);

      if (calMinTime >= 0 && calMinTime < 15) {
        this.startTimeNow = time.slice(0, 13) + ":00:00";
        this.endTimeNow = time.slice(0, 13) + ":14:59";
      } else if (this.calMinTime >= 15 && this.calMinTime < 30) {
        this.startTimeNow = time.slice(0, 13) + ":15:00";
        this.endTimeNow = time.slice(0, 13) + ":29:59";
      } else if (this.calMinTime >= 30 && this.calMinTime < 45) {
        this.startTimeNow = time.slice(0, 13) + ":30:00";
        this.endTimeNow = time.slice(0, 13) + ":44:59";
      } else if (this.calMinTime >= 45 && this.calMinTime < 60) {
        this.startTimeNow = time.slice(0, 13) + ":45:00";
        this.endTimeNow = time.slice(0, 13) + ":59:59";
      }
    },
    async fetchTableData() {
      this.dialogVisible = false;
      try {
        const response = await axios.post(`${baseApi}/capacityInformation/selectall`, this.queryData);
        if (response.data.code === 0) {
          this.tableData = response.data.data;

          this.viewer.entities.removeAll();
          this.entitiesMap = {};
          this.updateRoutes();
          this.updatePolygonAreas();
          this.updateCircleAreas();
        }
        this.getCurrentTimeRange();

        if (
          this.queryData.startTime == this.startTimeNow &&
          this.queryData.endTime == this.endTimeNow
        ) {
          console.log("选择的时间点需要建立websocket");
          this.drawDrone();
          // this.viewer.zoomTo(this.viewer.entities);
          // this.flyToEntities(this.positions);

          // this.addMultipleDroneModels(this.viewer);
        } else {
          console.log("选择的时刻不需要ws", this.ws);
          if (this.ws) {
            console.log(
              "选择的时刻不需要ws，但是存在了ws，即将清除ws",
              this.ws
            );
            this.wsClosing = true; // 标记 WebSocket 正在关闭
            this.ws.onmessage = null; // 禁止处理关闭后的消息
            this.ws.close(); // 关闭 WebSocket 连接
            this.ws = null;
            // clearAllSpheres(this.viewer); // 清除无人机实体
            // clearAllDrones(this.viewer);
            this.droneModels = [];
          }
        }
      } catch (error) {
        console.error("获取表格数据失败", error);
      }
    },
    async fetchDetailData(row) {
      try {
        // const response = await axios.post(
        //   "http://47.99.75.194:8084/api/alarm-information/searchwholedata",
        //   { id: row.id, airspaceNumber: row.airspaceNumber }
        // );
        const response = await axios.post(`${baseApi}/capacityInformation/searchwholedata`, {
          id: row.id,
          airspaceNumber: row.airspaceNumber,
        });

        // console.log(response);
        if (response.data.code === 0) {
          this.detailData = response.data.data;
          console.log("searchwholedata的返回结果：detailData", this.detailData);

          // 将数字转换为罗马数字的函数
          function toRoman(num) {
            const romanNumerals = [
              { value: 5, numeral: "V" },
              { value: 4, numeral: "IV" },
              { value: 3, numeral: "III" },
              { value: 2, numeral: "II" },
              { value: 1, numeral: "I" },
            ];

            return romanNumerals.find((r) => r.value === num)?.numeral || "";
          }
          this.formattedAlarmTimes = this.detailData.alarmTime.map((data) => {
            const parts = data.time.match(
              /(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})-(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})/
            );
            const [startTime, endTime] = parts.slice(1, 3);
            const formattedStartTime = startTime.split(" ")[1];
            const formattedEndTime = endTime.split(" ")[1];
            const romanLevel = toRoman(data.level);

            return `${formattedStartTime} — ${formattedEndTime} ${romanLevel}级告警`;
          });

          this.$nextTick(() => {
            this.initChart(row); // 确保 DOM 更新后初始化图表
          });
        }
      } catch (error) {
        console.error("获取全天运行数据失败", error);
      }
    },
    initChart(row) {
      if (this.$refs.chartContainer) {
        // 初始化图表
        const chart = echarts.init(this.$refs.chartContainer);

        // 获取开始时间
        let startTime;
        if (!this.queryData.startTime) {
          // startTime = new Date(2024, 8, 16);
          startTime = new Date(Date.now() - 3600 * 2 * 1000); // 如果 startTime 为空，则获取当前时间前两小时的时间
        } else {
          startTime = new Date(this.queryData.startTime);
        }

        // 确定筛选范围
        const startTimeTimestamp = startTime.getTime();
        const startTimeAdjusted = new Date(startTimeTimestamp - 3600 * 1000); // 前一小时
        const endTimeAdjusted = new Date(startTimeTimestamp + 3600 * 1000); // 后一小时
        console.log("startTimeAdjusted", startTimeAdjusted)
        console.log("endTimeAdjusted", endTimeAdjusted)
        // 筛选数据
        const filteredData = this.detailData.airZoneDataList.filter((item) => {
          if (!item.time) return false; // 确保时间存在
          const itemTime = new Date(item.time);
          return itemTime >= startTimeAdjusted && itemTime <= endTimeAdjusted;
        });

        console.log("echarts折线图绘制的数据", filteredData)

        // 构建横轴数据
        const xAxisData = this.generateXAxisData(
          startTimeAdjusted,
          endTimeAdjusted
        );

        // 构建纵轴数据
        const yAxisData = filteredData.map((item) => item.flow);

        // 设置图表选项
        chart.setOption({
          visualMap: [
            {
              show: false,
              type: "continuous",
              seriesIndex: 0,
              min: 0,
              max: 400,
            },
            {
              show: false,
              type: "continuous",
              seriesIndex: 1,
              dimension: 0,
              min: 0,
              max: xAxisData.length - 1,
            },
          ],
          tooltip: { trigger: "axis" },
          grid: {
            left: "40",
            right: "20",
            top: "40",
            bottom: "40",
          },
          xAxis: {
            data: xAxisData,
            axisLabel: {
              rotate: 45, // 旋转45度
              color: "white",
            },
            nameTextStyle: {
              color: "white", // 设置y轴名称字体颜色为白色
            },
          },
          yAxis: {
            name: "流量/架次",
            axisLabel: {
              color: "white", // 设置y轴标签字体颜色为白色
            },
            nameTextStyle: {
              color: "white", // 设置y轴名称字体颜色为白色
            },
          },
          series: [
            {
              name: "流量数据",
              type: "line",
              data: yAxisData,
            },
          ],
        });

        // 渲染图表
        chart.resize();
      }
    },
    // 构建局部横轴数据
    generateXAxisData(startTime, endTime) {
      const xAxisData = [];
      let currentTime = new Date(startTime.getTime());
      currentTime.setHours(
        startTime.getHours(),
        startTime.getMinutes() - (startTime.getMinutes() % 15),
        0,
        0
      ); // 向下取最近的15分钟

      while (currentTime <= endTime) {
        xAxisData.push(
          `${currentTime.getHours().toString().padStart(2, "0")}:${currentTime
            .getMinutes()
            .toString()
            .padStart(2, "0")}`
        );
        currentTime = new Date(currentTime.getTime() + 15 * 60 * 1000);
      }

      return xAxisData;
    },

    fullChart() {
      if (this.$refs.fullChartContainer) {
        // 初始化图表
        const chart = echarts.init(this.$refs.fullChartContainer);

        // 提取年月日信息
        const extractYearMonthDay = (timestamp) => {
          const date = new Date(timestamp);
          return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
            2,
            "0"
          )}-${String(date.getDate()).padStart(2, "0")}`;
        };

        // 提取年月日信息
        const yearMonthDay = extractYearMonthDay(this.queryData.endTime);

        // 构建横轴数据（使用原始数据中的时间）
        const xAxisData = this.detailData.airZoneDataList.map(
          (item) => item.time
        );

        // 构建纵轴数据，确保每个时间点是唯一的
        const seriesData = this.detailData.airZoneDataList
          .map((item) => {
            try {
              const timestamp = new Date(item.time).getTime();
              return { name: item.time, value: [timestamp, item.flow] };
            } catch (error) {
              console.error(
                `Error processing item ${JSON.stringify(item)}:`,
                error
              );
              return null;
            }
          })
          .filter((item) => item); // 移除无效的条目

        // 输出 seriesData 以确认数据是否正确
        // console.log("seriesData:", seriesData);

        // 创建图表配置
        chart.setOption({
          visualMap: [
            {
              show: false,
              type: "continuous",
              seriesIndex: 0,
              min: 0,
              max: 400,
            },
            {
              show: false,
              type: "continuous",
              seriesIndex: 1,
              dimension: 0,
              min: 0,
              max: xAxisData.length - 1,
            },
          ],
          tooltip: {
            trigger: "axis",
            formatter: function (params) {
              if (params.length > 0) {
                const firstParam = params[0];
                // 格式化日期显示时间戳
                const date = new Date(firstParam.value[0]);
                const formattedDate = `${date.getFullYear()}-${(
                  date.getMonth() + 1
                )
                  .toString()
                  .padStart(2, "0")}-${date
                    .getDate()
                    .toString()
                    .padStart(2, "0")} ${date
                      .getHours()
                      .toString()
                      .padStart(2, "0")}:${date
                        .getMinutes()
                        .toString()
                        .padStart(2, "0")}`;
                return `${formattedDate}<br>流量: ${firstParam.value[1]}`;
              }
              return "";
            },
          },
          grid: {
            left: "40",
            right: "20",
            top: "40",
            bottom: "40",
          },
          xAxis: {
            type: "time",
            boundaryGap: false,
            min: new Date(`${yearMonthDay} 00:00`).getTime(),
            max: new Date(`${yearMonthDay} 23:59`).getTime(),
            splitLine: {
              show: false,
            },
            splitNumber: 24,
            axisLabel: {
              formatter: function (value) {
                const date = new Date(value);
                return `${date.getHours().toString().padStart(2, "0")}:${date
                  .getMinutes()
                  .toString()
                  .padStart(2, "0")}`;
              },
            },
          },
          yAxis: {
            name: "流量/架次",
            axisLabel: {
              color: "white",
            },
            nameTextStyle: {
              color: "white",
            },
          },
          series: [
            {
              name: "流量数据",
              type: "line",
              connectNulls: true, // 连接空数据点，防止断线
              showSymbol: false,
              data: seriesData.map((item) => item.value),
            },
          ],
        });

        // 渲染图表
        chart.resize();
      }
    },
  },
  beforeDestroy() {
    if (this.ws && this.ws.close) {
      this.ws.close();
    }
  },
};
</script>

<style scoped>
/* 弹窗 */
.box_57 {
  position: absolute;
  left: 150px;
  top: 200px;
  width: 950px;
  height: 466px;
  background: url(../assets/img/module3/dialog.png) 100% no-repeat;
  background-size: 100% 100%;
  z-index: 5;
}

.dialog_top {
  position: absolute;
  width: 950px;
  height: 48px;
  background: url(../assets/img/module3/dialogTop.png) -1px -1px no-repeat;
  background-size: 951px 50px;
}

.group_57 {
  width: 695px;
  height: 24px;
  margin: 12px 0 0 243px;
  display: flex;
  justify-content: space-between;
}

.group_58 {
  width: 464px;
  height: 21px;
  background: url(../assets/img/module3/decorate.png) 100% no-repeat;
  background-size: 100% 100%;
  margin-top: 2px;
}

.group_59 {
  width: 24px;
  height: 24px;
  background: url(../assets/img/module3/close.png) -3px -2px no-repeat;
  background-size: 30px 30px;
}

.text_57 {
  position: absolute;
  left: 380px;
  top: 8px;
  width: 190px;
  height: 33px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 24px;
  font-family: AlibabaPuHuiTi_2_75_SemiBold;
  font-weight: NaN;
  text-align: center;
  white-space: nowrap;
  line-height: 33px;
}

.label_4 {
  width: 45px;
  height: 43px;
  margin: 14px 0 0 905px;
}

/* 模块 */
.left-module {
  position: fixed;
  top: 32.5%;
  left: 14.8%;
  width: 900px;
  /* left: 20%;
  width: 500px; */
  background-color: rgba(31, 31, 56, 0.5);
  /* 半透明背景 */
  z-index: 1000;
  padding: 10px;
  padding-top: 0px;
  box-sizing: border-box;
  overflow-y: auto;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.module-content {
  margin: 90px 10px 10px 10px;
}

.flow_assessment {
  position: relative;
}


.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

h1 {
  color: #ffffff;
}

.group_7_flow {
  position: relative;
  /* width: 1556px; */
  height: 27px;
  background: url(../assets/img/SketchPng9a3840ec9a1e44cb90b8cc0d22f86217e9bd2dd719c9cad7bfacd8322b4b85d6.png) 100% no-repeat;
  background-size: 100% 100%;
}

.image-wrapper_flow {
  height: 15px;
  background: url(../assets/img/SketchPng52b9227060fb971dc8aa80dd7f6f807b2f2e66c54febc2818d9aa6cd633d0932.png) 1px 0px no-repeat;
  background-size: 284px 16px;
  width: 286px;
  margin: 6px 0 0 14px;
}

.image_1_flow {
  width: 22px;
  height: 20px;
  margin: -11px 0 0 2px;
}

.text_13_flow {
  background-image: linear-gradient(180deg,
      rgba(200, 215, 228, 1) 0,
      rgba(255, 255, 255, 1) 100%);
  position: absolute;
  left: 63px;
  /* top原先是3 */
  top: 2px;
  width: 126px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(112, 112, 112, 1);
  font-size: 20px;
  letter-spacing: 1px;
  font-family: PangMenZhengDao-3;
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
  line-height: 23px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*查询*/
.group_8_flow {
  /* width: 514px;
  height: 32px;
   */
  width: 494px;
  height: 32px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  /* margin-top: 5px; */
}

.text_time_flow {
  /* width: 42px;
  height: 100%;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20px; */
  width: 56px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  /* margin-top: 5px; */
}

/* .text_14_flow {
  width: 28px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  margin-top: 5px;
} */
.text_14_flow {
  width: 42px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  margin: 6px 0 0 24px;
}

.text_18_flow {
  width: 9px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  margin: 6px 0 0 10px;
}

.text_16_flow {
  width: 28px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  margin: 5px 0 0 24px;
}

.group_8_flow /deep/ .el-button {
  width: 72px;
  /* 设置按钮宽度 */
  height: 32px;
  /* 设置按钮高度 */
  margin-left: 31px;
  /* 设置按钮左边距 */
  padding: 0;
  /* 移除默认的内边距 */
}

/* 模块 */

.container_flow {
  width: 340px;
  position: absolute;
  right: 0px;
  min-height: 824px;
  /* max-height: 500px; */
  top: 80px;
  margin-left: auto;
  /* 自动左边距，推到右侧 */
  background: transparent;
  z-index: 5;
}

.group_20_flow {
  height: 27px;
  background: url(../assets/img/SketchPng600ae81165585f35dfc47ef36945158f74ebdbb3bf384fd1fa17d9446ad1ef0e.png) 0px 0px no-repeat;
  background-size: 320px 28px;
  margin-top: 6px;
  width: 320px;
  position: relative;
}

.group_21_flow {
  height: 15px;
  background: url(../assets/img/SketchPng5ad66f1eeb5fdb8ee4d60f15f6857a5733df1d892feec90bd92804c0ab6437de.png) 1px 0px no-repeat;
  background-size: 284px 16px;
  width: 286px;
  position: relative;
  margin: 6px 0 0 14px;
}

.image_3 {
  position: absolute;
  /* 图片绝对定位，不影响布局 */
  top: 18%;
  left: 17%;

  width: 80%;
  /* 让图片宽度覆盖整个容器 */
  height: 80%;
  /* 让图片高度覆盖整个容器 */
  z-index: 0;
  /* 将背景图片置于内容下层 */
}

.image_3_flow {
  position: absolute;
  left: 271px;
  top: 5px;
  width: 22px;
  height: 15px;
}

.thumbnail_55_flow {
  position: absolute;
  left: 3px;
  top: -4px;
  width: 20px;
  height: 20px;
}

.text_21_flow {
  background-image: linear-gradient(180deg,
      rgba(200, 215, 228, 1) 0,
      rgba(255, 255, 255, 1) 100%);
  position: absolute;
  left: 64px;
  top: 3px;
  width: 126px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(112, 112, 112, 1);
  font-size: 22px;
  letter-spacing: 1px;
  /* font-family: PangMenZhengDao-3; */
  font-family: 'smallTitleFont', sans-serif;
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
  line-height: 23px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 选择查询 */
.group_22_flow {
  width: 320px;
  height: 32px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.block_17_flow {
  flex: 1;
  /* 使两个 select 平分容器宽度 */
  /* background: url(../assets/img/SketchPngfcaec0cbc853eb310e69cdc4565a8ec4067fc2b130f2829647d2291b7a21d1db.png) 100% no-repeat; */
  background-size: 100% 100%;
  position: relative;
}

.block_18_flow {
  flex: 1;
  /* background: url(../assets/img/SketchPngfcaec0cbc853eb310e69cdc4565a8ec4067fc2b130f2829647d2291b7a21d1db.png) 100% no-repeat; */
  background-size: 100% 100%;
  position: relative;
  margin-left: 10px;
  /* 添加间隔 */
}

.select-box_flow {
  width: 100%;
  height: 32px;
  background: transparent;

  border: none;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  text-align: left;
  outline: none;
  cursor: pointer;
}

.select-box_flow /deep/ .el-input__inner {
  background: url(../assets/img/SketchPngffbed662ac69525967f5cf6f84f234a44e2ad9986b64954a1d015e6d544cb1c0.png) 100% no-repeat;

  /* background-color: rgba(112, 112, 112, 0.5); */
  /* border: none; */
  border: 1px solid #f0f0f073;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  text-align: left;
  line-height: 32px;
  height: 32px;
  padding: 0 10px;
  /* 调整内边距以居中文本 */
}

ul.custom-bullet {
  list-style: none;
  /* 移除默认的项目符号 */
  padding: 8px 10px 5px 10px;
}

ul.custom-bullet li::before {
  content: "";
  /* 清除默认的内容 */
  display: inline-block;
  /* 使其显示为内联块 */
  width: 16px;
  /* 设置图标宽度 */
  height: 16px;
  /* 设置图标高度 */
  background-size: cover;
  /* 覆盖整个区域 */
  background-repeat: no-repeat;
  /* 不重复背景图片 */
  margin-right: 8px;
  /* 在图标和文本之间添加一些间距 */
  vertical-align: middle;
  /* 垂直居中 */
}

ul.custom-bullet li[data-level="5"]::before {
  background-image: url(../assets/img/module3/redWarn.png);
  /* 五级告警图标 */
}

ul.custom-bullet li[data-level="4"]::before,
ul.custom-bullet li[data-level="3"]::before,
ul.custom-bullet li[data-level="2"]::before,
ul.custom-bullet li[data-level="1"]::before {
  background-image: url(../assets/img/module3/yellowWarn.png);
  /* 四级告警图标 */
}

/* 
.select-box /deep/ .el-input__suffix {
  display: none;
} */
/* 
 ::v-deep .el-select-dropdown{
  
  background: rgba(87, 133, 87, 0.78);
  
  border:0px;
  

}

 /deep/ .el-select-dropdown__item {
  color: rgb(7, 3, 3);
  font-size: 14px;
  text-align: left;
  line-height: 20px;
}

 /deep/ .el-select-dropdown__item:hover {
  background-color: #f0f0f0;
}

 /deep/ .el-select-dropdown__item.selected {
  color: rgba(255, 255, 255, 1);
  background-color: #0e161d;
} */

/* 列表 */
.section_14_flow {
  position: relative;
  /* 或者根据实际布局调整 */
  /* width: 320px; */
  overflow: auto;
  /* 自动添加滚动条 */
  max-height: 800px;
  /* 设置最大高度 */
  width: 100%;
  /* min-height: 366px; */
  background: url(../assets/img/SketchPng32fee252ef5eb54c7165ed49a9a6d3e4ed96b2b839a4ffd57aacaf48eb0905e8.png) 100% no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  transform: translateY(-6px);
}

.group0_39_flow {
  /* width: 234px;
  height: 311px;
  margin: 10px 0 0 24px; */
  width: 100%;
  padding: 10px 24px;
  /* 添加内边距以便于阅读 */
}

.text_33_flow,
.text_35_flow,
.text_37_flow,
.text_39_flow {
  width: fit-content;
  color: rgba(136, 211, 255, 1);
  font-size: 14px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-weight: normal;
  text-align: left;
  line-height: 20px;
  margin-top: 10px;
  display: block;
  /* 确保每个 span 占用一行 */
}

.text_34_flow,
.text_36_flow,
.text_38_flow,
.text_40_flow {
  width: fit-content;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-weight: normal;
  text-align: left;
  line-height: 20px;
  margin-top: 4px;
  display: block;
}

.network-analysis-btn {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
}

.block_19_flow {
  width: 272px;
  height: 32px;
  margin: 13px 0 0 6px;
}

.block_20_flow {
  width: 118px;
  height: 20px;
}

.image_6 {
  width: 25px;
  height: 15px;
  /* margin-top: 3px; */
  margin-right: 9px;
}

.text-group_1 {
  width: 83px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
}

.text-wrapper_23 {
  height: 32px;
  background: url(../assets/img/module3/smallButton.png) 100% no-repeat;
  background-size: 100% 100%;
  margin-left: 82px;
  width: 72px;
}

.text_full {
  text-shadow: inset 0px 0px 5px rgba(233, 251, 255, 0.43);
  background-image: linear-gradient(181deg,
      rgba(141, 219, 255, 1) 0,
      rgba(88, 235, 255, 1) 42.056381%,
      rgba(95, 169, 255, 1) 100%);
  width: 56px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(112, 112, 112, 1);
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 6px 0 0 8px;
}

.image-text {
  width: 118px;
  height: 20px;
  margin-top: 6px;
  margin-left: 29px;
}

/* 面板两个按钮 */

/* 按钮容器 */
.buttons-container_flow {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  width: 100%;
  /* height:0px; */
  padding: 10px 0;
}

.text-wrapper_10_flow {
  height: 32px;
  background: url(../assets/img/module3/btnNormal.png) 100% no-repeat;
  background-size: 100% 100%;
  /* width: 195px; */
  margin-left: 25px;
  margin-right: 20px;
  width: 126px;
  display: flex;
  justify-content: center;
}

.text-wrapper_11_flow {
  height: 32px;
  background: url(../assets/img/module3/btnNormal.png) 100% no-repeat;
  background-size: 100% 100%;
  width: 126px;
  margin-right: 22px;
  /* width: 100%; */
  display: flex;
  justify-content: center;
}

.text-wrapper_10_flow.activeBtn,
.text-wrapper_11_flow.activeBtn {
  background: url(../assets/img/module3/btnActive.png) 100% no-repeat;
}

.btn_full {
  margin-right: 22px;
  /* background: url(../assets/img/SketchPnge62f3939893534f8f09e77a374e79448a9819af1b1be57b08a0c8424a6cfe7e4.png) */
  /* 100% no-repeat; */
  color: rgba(88, 235, 255, 0.8);
  border: none;

  height: 32px;
  background: url(../assets/img/module3/btnNormal.png) 100% no-repeat;
  background-size: 100% 100%;
  /* margin-left: 82px; */
  width: 72px;
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
}

.btn_full.activeBtn {
  background: url(../assets/img/module3/smallButton.png) 100% no-repeat;
}

/* 按钮基础样式 */
.current-period-btn,
.full-day-btn {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 5px 5px;
  transition: all 0.3s ease;
  font-size: 14px;
  background-image: linear-gradient(181deg,
      rgba(141, 219, 255, 1) 0,
      rgba(88, 235, 255, 1) 42.056381%,
      rgba(95, 169, 255, 1) 100%);
  font-family: AlibabaPuHuiTi_2_55_Regular;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 选中状态下的悬停效果 */
/* .current-period-btn.active:hover,
.full-day-btn.active:hover {
  background-color: #2d8cf0;
} */

/* 数据组 */

/* .regional_table_flow {
  overflow: auto;
  height: 627px;
} */
/* 隐藏垂直滚动条 */
.risk-icon {
  /* height: 10px; */
  margin-top: 5px;
}

/* 滚动条样式 */
.regional_table_flow /deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px !important;
}

.regional_table_flow /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0px 0px 6px 0px rgba(73, 172, 207, 0.68) !important;
  /* 滚动条轨道阴影 */
  background-color: rgba(0, 16, 29, 0.5) !important;
  /* 滚动条轨道背景色 */
  border-radius: 8px !important;
  /* 滚动条轨道圆角 */
  height: 627px !important;
  width: 8px !important;
}

.regional_table_flow /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  box-shadow: inset 0px 0px 6px 0px rgba(73, 172, 207, 0.68) !important;
  /* 滚动条滑块阴影 */
  background-color: rgba(0, 141, 255, 1) !important;
  /* 滚动条滑块背景色 */
  border-radius: 8px !important;
  /* 滚动条滑块圆角 */
  width: 4px !important;
  /* 滚动条滑块宽度 */
  height: 248px !important;
  /* 滚动条滑块高度 */
  margin: 10px 0 0 2px !important;
  /* 滚动条滑块边距 */
}

.regional_table_flow /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 141, 255, 1) !important;
  /* 滚动条滑块悬停背景色 */
}

/* 最外层透明表格背景与白色字体 */
.regional_table_flow /deep/ .el-table,
.regional_table_flow /deep/ .el-table__expanded-cell {
  background-color: transparent;
  /* 设置透明背景 */
  color: white;
  /* 表格文字颜色 */
}

/* 表格头部和单元格的背景颜色透明 */
.regional_table_flow /deep/ .el-table th,
.regional_table_flow /deep/ .el-table tr,
.regional_table_flow /deep/ .el-table td {
  /* background-color: transparent !important; */
  /* 背景透明 */
  color: white;
  /* 确保文字为白色 */
  /* border: none; */
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_75_SemiBold;
}

.regional_table_flow /deep/ .el-table th {
  height: 29px;
}

.regional_table_flow /deep/ .el-table tr {
  height: 34px;
}

.regional_table_flow /deep/ .el-table .el-table__body-wrapper .el-table__body tr td {
  padding: 0.0625rem 0;
}

.regional_table_flow /deep/ .el-table td .cell {
  /* background: url(../assets/img/SketchPng32fee252ef5eb54c7165ed49a9a6d3e4ed96b2b839a4ffd57aacaf48eb0905e8.png) 100% no-repeat; */

  padding: 0;
  height: 34px;
  align-content: center;
}

/* 设置表格边框 */
.regional_table_flow /deep/ .el-table__body-wrapper {
  border: none;
}

.regional_table_flow /deep/ .el-table__body {
  width: calc(100%-8px);
}

.regional_table_flow /deep/ .el-table .el-table__header th.el-table__cell {
  background-color: transparent;
  /* 清除默认背景色 */
  border: none;
  /* 移除默认边框 */
  padding: 0;
  font-weight: normal;
}

.regional_table_flow /deep/ .el-table .el-table__header th.el-table__cell .cell {
  padding: 0px;
}

/* 自定义表头样式 */
.regional_table_flow /deep/ .el-table .el-table__header th.el-table__cell {
  height: 29px;
  /* background: url(../assets/img/SketchPng34a1cd5f82649ca4969d727ad3e3a01a2848a5b130d7c1a5186ea70fb9cf9845.png) 100% no-repeat;
  background-size: 100% 100%; */
  /* width: 320px; */
  position: relative;
  /* 相对定位 */
}

/* 数据行 */
.regional_table_flow /deep/ .el-table__body tr.el-table__row td {
  border: none;
  /* 确保数据行没有边框 */
  background: url(../assets/img/module3/tr.png) 100% no-repeat;
}

/* 展开行 */
.regional_table_flow /deep/ .el-table__expanded-cell {
  padding: 10px;
  background-color: transparent;
  /* 展开行背景透明 */
  border: none;
  /* 确保展开行没有边框 */
}

.regional_table_flow /deep/ .el-table__expand-icon {
  height: 34px;
  color: #ffffff;
}

/* 确保所有内部元素没有边框 */
.regional_table_flow /deep/ .el-table .el-table__body-wrapper .el-table__row,
.regional_table_flow /deep/ .el-table .el-table__body-wrapper .el-table__header th,
.regional_table_flow /deep/ .el-table .el-table__body-wrapper .el-table__body tr td {
  border: none !important;
}

.regional_table_flow /deep/ .el-table::before {
  height: 0px;
}

.regional_table_flow /deep/ .el-table .el-table__body tr:hover {
  background-image: none !important;
  font-weight: normal !important;
}

.charts_flow {
  background: rgb(24, 33, 53);
  margin: 0 20px 0 20px;
  border: 1px solid rgb(17, 69, 83);
  border-radius: 4px;
}

.block_22_flow {
  width: 284px;
  /* height: 87px; */
  background: url(../assets/img/module3/alertTime.png) 100% no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;
  margin-left: 16px;
}

.box_59_flow {
  width: 264px;
  height: 34px;
  background: url(../assets/img/module3/alertTimeIn.png) 100% no-repeat;
  background-size: 100% 100%;
  align-content: center;
  padding-left: 15px;
  margin-bottom: 5px;
}

.time_block {
  width: 325px !important;
  height: 32px !important;
  background: url(../assets/img/module3/time.png) 100% no-repeat;
  background-size: 100% 100%;
  margin-left: 10px;
}

/*新需求时间选择器相关*/
.time_block /deep/ .el-input__icon {
  display: none;
}

.time_block /deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  display: flex;
  align-items: center;
  /*纵向居中*/
  justify-content: center;
  /*横向居中*/
  height: 100%;
}

.time_block /deep/ .el-date-editor.el-input {
  width: 324px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  margin: 6px 0 0 10px;
}

.time_block /deep/.el-date-editor el-input el-input--prefix el-input--suffix el-date-editor--datetime {
  display: flex;
  align-items: center;
  /*纵向居中*/
  justify-content: center;
  /*横向居中*/
  height: 100%;
}

.time_block /deep/ .el-input__inner {
  background: transparent;
  /* 背景透明 */
  display: flex;
  align-items: center;
  /* text-align: center; */
  /* width: 100%;
  height: 30px !important; */
  /* 填满time_block容器 */
  border: none;
  box-shadow: none;
  padding: 0;

  color: rgba(255, 255, 255, 1);
}
</style>
<style>
.dxfSelect {
  background: #09284e !important;
  border: 1px solid #0e2647 !important;
}

.dxfSelect .el-popper__arrow::before {
  background: #184f93 !important;
  border: 1px solid #2c5ea2 !important;
}

.dxfSelect .el-select-dropdown__item {
  color: white;
  /* 设置文本颜色为白色 */
}

.dxfSelect .el-select-dropdown__item.hover,
.dxfSelect .el-select-dropdown__item:hover {
  background-color: #1a356b;
  /* 鼠标悬停时的背景色 */
}

.dxfSelect .el-select-dropdown__item.selected.hover {
  background-color: #1a356b;
  /* 鼠标悬停时的背景色 */
}

.el-popper[x-placement^=bottom] .popper__arrow,
/*el-popover上边三角下层的颜色---也就是视觉上的边框*/
.el-popper[x-placement^=bottom] .popper__arrow::after

/*el-popover上边三角表层的颜色---也就是视觉上的角*/
  {
  border-bottom-color: transparent !important;
  left: 85% !important;
}

/*时间选择器面板颜色相关*/
/*主框背景颜色*/
.selectDown {
  background: #0a1b28 !important;
}

.selectDown .el-date-picker__header-label {
  color: #ffffff !important;
  /*日历header文字颜色*/
}

.selectDown .el-date-table td.next-month,
.el-date-table td.prev-month {
  /*上个月和下个月日期字体颜色*/
  color: #606266 !important;
}

/*当月字体颜色*/
.selectDown.el-picker-panel {
  color: #ffffff !important;
}

/*星期文字颜色*/
th {
  color: #ffffff !important;
}

/*切换年月日箭头颜色*/
.selectDown .el-picker-panel__icon-btn {
  color: #ffffff !important;
}

/*input框背景*/
.selectDown .el-input__inner {
  background: #0a1b28 !important;
  color: #ffffff !important;
}

/*主框底部背景*/
.selectDown .el-picker-panel__footer {
  background: transparent !important;
}

/*确定按钮样式*/
.selectDown .el-button--mini {
  background: transparent !important;
  color: #ffffff !important;
  border: none;
}

.selectDown .el-button--text {
  /*主面板按钮颜色*/
  color: #409eff !important;
}

/*时分秒选择器相关*/
.selectDown .el-time-panel {
  background-color: #0a1b28 !important;
  /*整体背景颜色*/
}

/*时分秒字体颜色*/
.selectDown .el-time-spinner__item {
  color: #ffffff !important;
}

.selectDown .el-time-spinner__item:hover:not(.disabled):not(.active) {
  color: #2e4151 !important;
}

.selectDown .el-time-panel__btn {
  /*时分秒选择器的取消按钮*/
  color: #ffffff;
}

.selectDown .el-date-table td.disabled div {
  background-color: #0a1b28;
  color: #606266;
}


.cesiumContainerBox {
  width: 100%;
  position: relative;
  height: 76vh;
  margin-top: 0.5rem;
  padding: 0;

  .mapBg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    pointer-events: none;
  }

  .layer {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    pointer-events: none;
    box-shadow: inset -200px 0px 60px -20px rgb(6 7 29 / 35%), inset 200px 0px 60px -20px rgb(6 7 29 / 35%);
  }
}
</style>